<template>
  <el-container>
    <el-aside v-if="$route.matched[1].meta.childrenSoft" width="auto">
      <div class="Aside-t">
        <div class="Aside-t-menu">
          <el-menu :router="true" :default-active="defaultActive">
            <div v-for="(item, index) in routerArr" :key="index">
              <el-submenu :index="item.idx">
                <template slot="title">
                  <span>{{ item.title }}</span>
                </template>

                <el-menu-item
                  v-for="(items, indexs) in item.children"
                  :key="indexs"
                  :class="
                    $route.name == items.rtName ? 'activeDisr' : 'notActive'
                  "
                  :index="items.rtTo"
                  >{{ items.rtTitle }}</el-menu-item
                >
              </el-submenu>
            </div>
          </el-menu>
        </div>
      </div>
    </el-aside>
    <el-container>
      <el-header class="header">
        <Head />
      </el-header>
      <div class="views">
        <router-view>
          <slot></slot>
        </router-view>
      </div>
    </el-container>
  </el-container>
</template>

<script>
export default {
  components: {
    Head: () => import("publicCom/Head")
  },
  computed: {
    routerArr() {
      return this.$route.matched[1].meta.children;
    },
    defaultActive() {
      return this.$route.path;
    }
  }
};
</script>

<style lang="scss" scoped>
.views {
  padding: 16px;
}
.header {
  background: #fff;
}

.Aside-t {
  width: 132px;
  height: 100vh;
  overflow: hidden;
  background-color: #ffffff;
  border-right: 1px solid #ebedf0;
  color: #444444;
  font-size: 14px;
  .Aside-t-menu {
    padding-top: 30px;
  }
  .el-menu {
    padding: 0 10px;
    border: 0;
  }
  .el-menu-item {
    width: 108px;
    min-width: 0 !important;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 !important;
    &:hover {
      background-color: #ebebeb !important;
      color: #1890ff !important;
    }
  }
}
.notActive {
  color: #000;
}
.activeDisr {
  color: #1890ff !important;
  background-color: #ebebeb;
  &:before {
    display: none;
  }
  &:after {
    display: none;
  }
}
</style>
<style lang="css">
.el-submenu__title {
  padding: 0 !important;
  height: 40px;
  line-height: 40px;
}
.el-submenu__title:hover {
  background-color: #fff !important;
}
.el-submenu__title span {
  display: inline-block;
  margin-left: 18px;
}
.el-submenu__icon-arrow {
  right: 102px;
}
</style>
